<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>找回密码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densityDpi=device-dpi">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
	<c:set var="ctx" value="${pageContext.request.contextPath}" />
    <link rel="stylesheet" href="${ctx}/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="${ctx}/assets/css/style.css?v=2.3">
    <link rel="stylesheet" href="${ctx}/assets/css/index.css?v=2.3">
       <script src="${ctx}/assets/js/myAlert.js"></script>
    <!-- <style>
        .mycode {
            display: inline-block;
            width: 80px;
            height: 40px;
            vertical-align: middle;
            border: solid #999999 1px;
            border-radius: 10px;
            box-shadow: #000000 inset 0px 0px 2px;
            position: absolute;
            right: 1rem;
            top: 4px;;
        }
    </style>
     -->
</head>
<body >
<header data-am-widget="header" class="am-header am-header-default   am-border-bottom">
    <div class="am-header-left am-header-nav">
        <a  onclick="history.go(-1)"  >
            <i class="icon_8"></i>
        </a>
    </div>
    <h1 class="am-header-title" >
        找回密码
    </h1>

</header>
<section class="" id="amz-main" data-tag="css-nav">

    <div class="div-logo"></div>

    <ul class="am-list am-list-static am-list-border margin-top-20 register">
        <li class="am-padding-left-xl">
            <i class="icon_1"></i>
            <input type="tel" id="tel" class=""  placeholder="输入您的手机号"></li>
        <!-- <li class="am-padding-left-xl">
            <i class="icon_1"></i>
            <input id="inputCode" type="text" class=""  placeholder="输入验证码">
            <span id="code2" class="mycode"></span>
        </li>
         -->
        <li  class="am-padding-left-xl ">
            <i class="icon_2"></i>
            <input type="tel"  id="code" class=""  placeholder="输入4位手机验证码">
            <i class="validate_btn " onclick="createCode()">获取验证码</i>
        </li>
        <li  class="am-padding-left-xl ">
            <i class="icon_0151"></i>
            <input type="password" id="password"  class=""  placeholder="设置密码(6-20位数字或字母)">

        </li>
    </ul>

    <div class="am-g am-g-fixed  font-14 bd-phone margin-top-20 ">
        <div class="am-u-sm-12  am-text-center">
            <button type="button" class="am-btn am-btn-warning am-btn-block" onclick="updatePassword();">重置密码</button>
        </div>
    </div>

</section>

<script src="${ctx}/assets/js/jquery.min.js"></script>
<script src="${ctx}/assets/js/amazeui.min.js"></script>
<script>
var wait=60;  
function createCode(){
	
	var telphone=$("#tel").val();
	 var reg = /^0?1[3|4|5|6|7|8][0-9]\d{8}$/;
	 if (!reg.test(telphone)) {
	      myAlert("请输入正确的手机号码");
	      return false;
	 }
	 
	 var isRegStr=$.ajax({url:"${ctx}/isRegist?counseTel="+telphone,async:false});
	 var isRegJson=JSON.parse(isRegStr.responseText);
	 if(isRegJson.resultCode=="0"){
	 	myAlert("手机号码未注册，无法修改密码");
	 	return false;
	 }
	
	if(wait==60){
		var baseResponse=$.ajax({url:"${ctx}/sendAuthCode?flag=upp&telphone="+telphone,async:false});
	  	var sendAuthCode=JSON.parse(baseResponse.responseText);
	   	if(sendAuthCode.resultCode=="0"){
	   		
	   	}else{
	   		myAlert(sendAuthCode.resultDesc);
	   	}
	}
	
	if(wait == 0) {  
        $(".validate_btn").removeClass("disabled");
        $(".validate_btn").text("获取验证码");  
        wait = 60;  
    }else {  
        $(".validate_btn").addClass("disabled");
        $(".validate_btn").text("重新发送(" + wait + ")");  
        wait--;  
        setTimeout(function() {  
            createCode(); 
        },  
        1000);  
    } 
}
	
	function updatePassword() {
		var tel=$("#tel").val();
		var password=$("#password").val();
		var code=$("#code").val();
		if(code==""){
			myAlert("请输入验证码");
			return false;
		}
		if(tel=="" || password==""){
			myAlert("请输入电话号码和密码");
			return false;
		}
		if(password.length<6 || password.length>20){
			myAlert("密码长度应为6-20位长度");
			return false;
		}
		var reg = /^[0-9a-zA-Z]+$/;
		if(!reg.test(password)){
		    myAlert("密码只能由数字和字母组成");
			return false;
		}
		var baseStr=$.ajax({url:"${ctx}/updatePassword?code="+code+"&tel="+tel+"&password="+password,async:false});
        var baseJson=JSON.parse(baseStr.responseText);
		if(baseJson.resultCode=="0"){
			var modelHtml="<div class='am-modal am-modal-confirm' tabindex='-1' id='my-confirm1100'>";
			    modelHtml+="<div class='am-modal-dialog'>";
			    modelHtml+="    <div class='am-modal-hd'>佐心科技</div>";
			    modelHtml+="    <div class='am-modal-bd' id='alertMsg'>";
			           modelHtml+="密码已经修改成功，请到登录页面重新登录!";
			    modelHtml+="    </div>";
			    modelHtml+="    <div class='am-modal-footer'>";
			    modelHtml+="        <span class='am-modal-btn' data-am-modal-confirm>确定</span>";
			    modelHtml+="    </div>";
			    modelHtml+="</div>";
			modelHtml+="</div>";
			$("body").append(modelHtml);
    		$('#my-confirm1100').modal({
            relatedTarget: this,
            onConfirm: function(options) {
            	location.href="login.jsp";
            },
            // closeOnConfirm: false,
            onCancel: function() {

            }
        });
		}else{
			myAlert(baseJson.resultDesc);
		}
	}
</script>
<script src="${ctx}/assets/js/js.KinerCode.js"></script>
<script>
    var inp = document.getElementById('inputCode');
    var code = document.getElementById('code');
    var submit = document.getElementById('submit');

    var c = new KinerCode({
        len: 4,
        question: false,
        copy: false,
        bgColor: "",
        bgImg: "bg.jpg",
        randomBg: false,
        inputArea: inp,
        codeArea: code,
        click2refresh: true,
        false2refresh: true,
        validateObj: submit,
        validateEven: "click",
        validateFn: function (result, code) {//验证回调函数
            
        }
    });

</script>
</body>
</html>